<template>
	<div class="app-container" >
		<div class="wx-user-box" style="padding-top: 0;">
			<div class="wx-user-title">门禁广告</div>
			<div class="search-box">
				<el-table :data="list" style="width: 100%;">
					<el-table-column prop="plate_number" label="广告图片" >
						<template slot-scope="scope" >
							<el-image v-if="scope.row.image" style="width: 50px; height: 50px" :src="scope.row.image + '?imageView2/1/w/200/h/200'" :preview-src-list="[scope.row.image]"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="play_time" label="播放时间" >
						<template slot-scope="scope" >
							{{scope.row.play_time}}
						</template>
					</el-table-column>
					<el-table-column prop="xiaoqu_id" label="投放小区" >
						<template slot-scope="scope" >
							<el-tag v-for="(item,index) in getArr(scope.row.xiaoqu_id)">{{xiaoQuObj[item]}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="state" label="状态" >
						<template slot-scope="scope" >
							<el-tag type="success" v-if="scope.row.state">启用</el-tag>
							<el-tag type="info" v-else>禁用</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" width="100px" />
					<el-table-column align="right">
						<template slot="header">
							<el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="openAdd()">添加广告</el-button>
						</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="setItem(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="page-block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="size"
						layout="total, prev, pager, next"
						:total="totalRow"
					></el-pagination>
				</div>
			</div>
		</div>

		<el-dialog :title="form.id ? '编辑':'添加'" :visible.sync="dialogVisible" width="600px">
			<el-form ref="form" :model="form" label-width="120px" >
				<el-form-item label="广告图片" :required="true">
					<el-upload
						class="avatar-uploader"
						action="https://upload.qiniup.com"
						:data="qn"
						:show-file-list="false"
						:on-success="handleSuccess"
						:before-upload="beforeUpload"
					>
						<img v-if="form.image" :src="form.image + '?imageView2/1/w/200/h/200'" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="选择小区" :required="true">
					<el-select
						multiple 
						v-model="form.xiaoqu_id"
						placeholder="请选择"
						style="width: 100%;"
						filterable
					>
						<el-option v-for="item in xiaoQuList" :key="item.id " :label="item.xq_name" :value="item.id + ''"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="播放时间(秒)" :required="true">
					<el-input-number v-model="form.play_time" step-strictly :min="1"></el-input-number>
				</el-form-item>
				
				<el-form-item label="状态" >
					<el-switch v-model="form.state"></el-switch>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import Api from '@/api/pages/entrance-guard/index.js';
import { getToken } from '@/api/qiniu';
export default {
	name: 'entrance-guard',
	components: {},
	data() {
		return {
			dialogVisible: false,
			list: [],
			page: 1,
			size: 10,
			currentPage: 1,
			totalRow: 0,
			formInline: {},
			form: {
				id: '',
				play_time: 10,
				image: '',
				state:true,
				xiaoqu_id:''
			},
			xiaoQuList: [],
			xiaoQuObj:{},
			qn:{
			  token: "",
			  key: ""
			},
		};
	},
	computed: {},
	mounted() {
		this.loadAllXiaoQu();
	},
	methods: {
		search() {
			this.page = 1;
			this.getData();
		},
		handleSizeChange(val) {
			this.size = val;
			this.page = 1;
			this.getData();
		},
		handleCurrentChange(val) {
			this.page = val;
			this.getData();
		},
		// 上传成功
		handleSuccess(res, file) {
			this.form.image = 'http://cdn.gexinit.com/' + res.key; // 这边显示图片，上传成功后会返回一个对象，包含一个hash和一个key,然后前边加上七牛云为你随机分配的域名就是图片的外链。查看这个域名可看下面的描述
		},
		// 上传之前判断
		beforeUpload(file) {
			this.qn.key = 'wuyeproducts/' + new Date().getTime() + file.name; // 通过设置key为文件名，上传到七牛中会显示对应的图片名
			// debugger
			const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
			const isLt10M = file.size / 1024 / 1024 < 10;

			if (!isJPG) {
				error('上传头像图片只能是 JPG/PNG 格式!');
			}
			if (!isLt10M) {
				error('上传头像图片大小不能超过 10MB!');
			}
			return isJPG && isLt10M;
		},
		getToken() {
			if (!this.qn.token) {
				getToken().then(res => {
					this.qn.token = res.uptoken;
				});
			}
		},
		getData() {
			let data = {
				page: this.page,
				size: this.size
			};
			Api.query(data).then(res => {
				if (res.state) {
					this.list = res.data.list;
					this.totalRow = res.data.totalRow;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 获取小区
		loadAllXiaoQu() {
			Api.loadAllXiaoQu({ }).then(res => {
				if (res.state) {
					res.data.forEach(item => {
						this.xiaoQuObj[item.id] = item.xq_name;
					})
					this.xiaoQuList = res.data;
					this.getData();
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 删除
		del(id) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					Api.del({ id: id }).then(res => {
						if (res.state) {
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				})
				.catch(() => {});
		},
		setItem(item) {
			this.getToken();
			this.form = {
				id: item.id,
				image: item.image,
				state:item.state,
				play_time:item.play_time,
				xiaoqu_id:item.xiaoqu_id.split(',')
			};
			console.log(this.form)
			this.dialogVisible = true;
		},
		openAdd() {
			this.getToken();
			this.form = {
				id: '',
				play_time: 10,
				image: '',
				state:true,
				xiaoqu_id:''
			};
			this.dialogVisible = true;
		},
		saveOrUpdate() {
	
			if (!this.form.image) {
				this.$message.error('请上传照片');
				return;
			}
			if (!this.form.xiaoqu_id.length) {
				this.$message.error('请选择投放小区');
				return;
			}
			if (!this.form.play_time) {
				this.$message.error('请输入输入播放时间');
				return;
			}

			let data = {};
			if (this.form.id) {
				data['advertising.id'] = this.form.id;
			}
			data['advertising.image'] = this.form.image;
			data['advertising.state'] = this.form.state;
			data['advertising.play_time'] = this.form.play_time;
			data['advertising.xiaoqu_id'] = this.form.xiaoqu_id.join();
			Api.save(data).then(res => {
				if (res.state) {
					this.$message({ message: res.msg, type: 'success' });
					this.getData();
					this.dialogVisible = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		sliceTime(time) {
			return time ? time.slice(0, 10) : '';
		},
		getArr(str) {
			let arr = [];
			if(str) {
				arr = str.split(',');
			}
			return arr
		}
	}
};
</script>
<style scoped>
.page-block {
	display: flex;
	justify-content: center;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
